import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { AdminTitle, Bool, JsonPre, Mono, StatusChip } from '@/components/admin/ui';
import { KeyValue } from '@/components/ui/key-value';
import { Unavailable } from '@/components/ui/unavailable';
import { adminApi, load, requireAdmin } from '@/lib/admin/admin-api';
import { fmtBytes, fmtDateTime, fmtInt } from '@/lib/format';
import { routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Snapshot', robots: { index: false, follow: false } };
export const dynamic = 'force-dynamic';

/** Render the API's `diff` as change rows when it is a map/array of changes, otherwise as JSON. */
function Diff({ diff }: { diff: unknown }) {
  if (diff === null || diff === undefined) return <p className="text-xs text-ink-3">No diff (first snapshot or unchanged).</p>;
  const rows: { key: string; before: unknown; after: unknown }[] = [];
  if (Array.isArray(diff)) {
    for (const [i, it] of diff.entries()) {
      if (it && typeof it === 'object') {
        const o = it as Record<string, unknown>;
        rows.push({ key: String(o.key ?? o.path ?? o.property ?? o.field ?? i), before: o.old ?? o.before ?? o.from ?? o.old_value, after: o.new ?? o.after ?? o.to ?? o.new_value });
      }
    }
  } else if (typeof diff === 'object') {
    const o = diff as Record<string, unknown>;
    const looksLikeMap = Object.values(o).every((v) => v && typeof v === 'object' && !Array.isArray(v) && ('old' in (v as object) || 'new' in (v as object) || 'before' in (v as object) || 'after' in (v as object)));
    if (looksLikeMap) {
      for (const [k, v] of Object.entries(o)) {
        const c = v as Record<string, unknown>;
        rows.push({ key: k, before: c.old ?? c.before, after: c.new ?? c.after });
      }
    }
  }
  if (!rows.length) return <JsonPre value={diff} />;
  const show = (v: unknown) => (v === undefined || v === null ? <span className="text-ink-3">—</span> : <span className="break-all">{typeof v === 'string' ? v : JSON.stringify(v)}</span>);
  return (
    <ul className="divide-y divide-rule border-y border-rule text-xs">
      {rows.map((r) => (
        <li key={r.key} className="grid gap-x-3 gap-y-0.5 py-1.5 md:grid-cols-[10rem_minmax(0,1fr)_minmax(0,1fr)]">
          <Mono className="text-ink">{r.key}</Mono>
          <span className="text-danger line-through decoration-danger/50">{show(r.before)}</span>
          <span className="text-positive">{show(r.after)}</span>
        </li>
      ))}
    </ul>
  );
}

export default async function AdminSnapshotPage({ params }: { params: Promise<{ id: string }> }) {
  await requireAdmin();
  const { id } = await params;
  const res = await load(adminApi.snapshot(id));
  if (!res.ok && res.error.startsWith('404')) notFound();
  if (!res.ok) {
    return (
      <>
        <AdminTitle title="Snapshot" />
        <Unavailable what="Snapshot" reason={res.error} />
      </>
    );
  }
  const s = res.data;
  return (
    <>
      <p className="mb-2 text-xs">
        <Link href="/admin/documents" className="link">← Documents</Link> · <Link href={`/admin/documents/${encodeURIComponent(s.document_id)}`} className="link">document</Link>
      </p>
      <AdminTitle title={`Snapshot ${fmtDateTime(s.observed_at)}`} lede={<Mono>{s.id}</Mono>}>
        <Link href={`/admin/extractions/${encodeURIComponent(s.id)}`} className="inline-flex h-8 items-center border border-rule px-2.5 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">
          Extraction debugger →
        </Link>
      </AdminTitle>
      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_22rem]">
        <div className="min-w-0 space-y-8">
          <section>
            <p className="eyebrow mb-2">Structured extraction</p>
            <JsonPre value={s.structured} maxHeight="28rem" />
          </section>
          <section>
            <p className="eyebrow mb-2">Diff vs previous snapshot</p>
            <Diff diff={s.diff} />
          </section>
          <section>
            <p className="eyebrow mb-2">
              Cleaned text excerpt {s.text_chars !== undefined && <span className="tnum text-ink-3">{fmtInt(s.text_chars)} chars{s.text_truncated ? ' · truncated at 20 kB' : ''}</span>}
            </p>
            {s.text ? (
              <pre className="scrollbar-thin max-h-[32rem] overflow-auto whitespace-pre-wrap border border-rule bg-surface p-3 text-[12px] leading-relaxed text-ink-2">{s.text}</pre>
            ) : (
              <p className="text-xs text-ink-3">{s.text_error ? `Text unavailable: ${s.text_error}` : s.has_text === false ? 'No cleaned text for this snapshot (binary or JSON document).' : 'No text.'}</p>
            )}
          </section>
        </div>
        <aside className="min-w-0 space-y-6">
          <KeyValue
            dense
            rows={[
              { key: 'url', label: 'URL', value: <a href={s.url} target="_blank" rel="noopener noreferrer" className="link break-all text-xs">{s.url}</a> },
              { key: 'final_url', label: 'Final URL', value: s.final_url && s.final_url !== s.url ? <span className="break-all text-xs">{s.final_url}</span> : undefined },
              { key: 'connector', label: 'Connector', value: <Mono>{s.connector_name ?? '—'}</Mono> },
              { key: 'doc_type', label: 'Type', raw: s.doc_type },
              { key: 'entity', label: 'Entity', value: s.entity_slug ? <Link href={routes.entity({ entity_type: s.entity_id?.split('_')[0] ?? 'model', slug: s.entity_slug })} className="link text-xs">{s.entity_name ?? s.entity_slug}</Link> : undefined },
              { key: 'http_status', label: 'HTTP', raw: s.http_status },
              { key: 'content_type', label: 'Content type', raw: s.content_type },
              { key: 'byte_size', label: 'Size', raw: fmtBytes(s.byte_size) },
              { key: 'changed', label: 'Changed', value: <Bool v={s.changed} /> },
              { key: 'processing_status', label: 'Processing', value: <StatusChip value={s.processing_status} /> },
              { key: 'parser_version', label: 'Parser', raw: s.parser_version },
              { key: 'connector_version', label: 'Connector version', raw: s.connector_version },
              { key: 'transport', label: 'Transport', raw: s.transport },
              { key: 'content_hash', label: 'Content hash', value: s.content_hash ? <Mono className="break-all">{s.content_hash}</Mono> : undefined },
              { key: 'run_id', label: 'Run', value: s.run_id ? <Mono>{s.run_id}</Mono> : undefined },
              { key: 'has_raw', label: 'Raw archived', value: <Bool v={s.has_raw} /> },
            ]}
          />
          {s.headers && Object.keys(s.headers).length > 0 && (
            <div>
              <p className="eyebrow mb-2">Response headers</p>
              <JsonPre value={s.headers} maxHeight="14rem" />
            </div>
          )}
        </aside>
      </div>
    </>
  );
}